<template>
  <div class="config-container">
    <!-- 加载状态 -->
    <div v-if="loading" class="loading-overlay">
      <div class="loading-spinner"></div>
      <div class="loading-text">加载中...</div>
    </div>

    <!-- 错误提示 -->
    <div v-else-if="error" class="error-container">
      <div class="error-icon">⚠️</div>
      <div class="error-message">{{ error }}</div>
      <button class="retry-btn" @click="retryLoad()">重试</button>
    </div>

    <!-- 车型标题区域 -->
    <div v-else class="car-header">
      <!-- 左侧评分卡片（含雷达图） -->
      <div class="rating-card-with-radar">
        <div class="rating-label">大众评分</div>
        <div class="radar-chart-container">
          <div class="radar-chart">
            <div class="radar-bg"></div>
            <div class="radar-values"></div>
            <div class="rating-score">{{ averageScore || '4.2' }}</div>
            <!-- 雷达图顶点标签 -->
            <div class="radar-label top" style="left: 50%; top: 0;">动力<span>{{ comments.length > 0 ? comments[0].powerScore : '4.5' }}</span></div>
            <div class="radar-label top-right" style="right: 0; top: 20%;">内饰<span>{{ comments.length > 0 ? comments[0].interiorScore : '4.3' }}</span></div>
            <div class="radar-label bottom-right" style="right: 0; bottom: 20%;">舒适性<span>{{ comments.length > 0 ? comments[0].comfortScore : '4.1' }}</span></div>
            <div class="radar-label bottom" style="left: 50%; bottom: 0;">配置<span>4.4</span></div>
            <div class="radar-label bottom-left" style="left: 0; bottom: 20%;">操控<span>{{ comments.length > 0 ? comments[0].handlingScore : '4.6' }}</span></div>
            <div class="radar-label top-left" style="left: 0; top: 20%;">空间<span>{{ comments.length > 0 ? comments[0].spaceScore : '4.0' }}</span></div>
          </div>

        </div>
        <div class="rating-categories">
          <div class="category">动力</div>
          <div class="category">内饰</div>
          <div class="category">舒适性</div>
          <div class="category">配置</div>
          <div class="category">操控</div>
          <div class="category">空间</div>
        </div>
        <div class="rating-compare">同级别均值: 4.13分</div>
        <!-- 用户评价摘要 -->
        <div class="user-review-summary">
          <div class="review-label">用户评价</div>
          <div class="review-content">"{{ comments.length > 0 ? comments[0].commentDetail : '动力强劲，内饰豪华，空间宽敞，非常满意的一次购车体验！' }}"
            <div class="review-author">— 用户{{ comments.length > 0 ? comments[0].userId : '张先生' }}{{ comments.length > 0 ? '' : '，购买于2023-10' }}</div>
          </div>
          <button class="review-btn" @click="$router.push(`/car/${modelId}/reviews`)" >立即评论</button>
        </div>

      </div>

      <!-- 右侧图片和车辆信息 -->
      <div class="car-main-content">
        <div class="car-info-container">
          <div class="car-details">
            <div class="title-container">
              <h1 class="car-title">{{ currentCar.modelName }}</h1>
              <div class="price">{{ currentCar.modelPrice }}起</div>
            </div>
            <div class="title-actions">
              <div class="car-badge">限时优惠</div>
            </div>
            <div class="car-actions">
              <button class="consult-btn" @click="$router.push({ name: 'dealerContact', query: { carModel: currentCar.modelName } })" v-if="currentCar.modelName">咨询底价</button>
              <button class="finance-btn">分期购车</button>
            </div>
          </div>
        </div>

        <div class="car-image-container">
          <!-- 修复图片路径并清理冗余容器 -->
          <img :src="currentCar.picUrl" :alt="currentCar.name" class="car-image" v-if="currentCar.picUrl">
        </div>
      </div>
    </div>

    <!-- 选项卡导航 -->
    <div class="tabs">
      <!-- <div 
        class="tab" 
        :class="{ active: activeTab === 'overview' }"
        @click="activeTab = 'overview'">车辆首页</div>
      <div 
        class="tab" 
        :class="{ active: activeTab === 'images' }"
        @click="activeTab = 'images'">实拍大图</div> -->
      <div class="tab" :class="{ active: activeTab === 'specs' }" @click="activeTab = 'specs'">参数配置</div>
      <div class="tab" :class="{ active: activeTab === 'community' }" @click="activeTab = 'community'">评论</div>
      <!-- <div 
        class="tab" 
        :class="{ active: activeTab === 'used' }"
        @click="activeTab = 'used'">查找经销商</div> -->
    </div>

    <!-- 主要内容区域 -->
    <div class="content-container">
      <!-- 左侧主内容 -->
      <div class="main-content">
        <!-- 车辆概览 -->
        <div class="tab-content" :class="{ active: activeTab === 'overview' }" id="overview">
          <div class="car-gallery">
            <img :src="currentCar.mainImage" :alt="currentCar.name" class="main-image" v-if="currentCar.mainImage">
            <div class="thumbnails">
              <img v-for="img in currentCar.images" :key="img.id" :src="img.url" :alt="img.name" class="thumbnail" v-if="currentCar.images">
            </div>
          </div>

          <div class="car-details">
            <h2>车型亮点</h2>
            <div class="highlights">
              <div class="highlight-item" v-for="highlight in currentCar.highlights" :key="highlight.id" v-if="currentCar.highlights">
                <div class="highlight-icon">{{ highlight.icon }}</div>
                <div class="highlight-text">{{ highlight.text }}</div>
              </div>
            </div>

            <h2>车型配置</h2>
            <div class="config-options">
              <div class="config-group" v-for="group in currentCar.configGroups" :key="group.id" v-if="currentCar.configGroups">
                <h3>{{ group.name }}</h3>
                <div class="config-items">
                  <div class="config-item" v-for="item in group.items" :key="item.id">
                    <span class="item-name">{{ item.name }}</span>
                    <span class="item-value">{{ item.value }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 参数配置选项卡内容 -->
        <div class="tab-content" :class="{ active: activeTab === 'specs' }" id="specs">
          <div class="specs-container">
            <!-- 基础参数组 -->
            <div class="specs-group">
              <h3>基础参数</h3>
              <div class="specs-table">
                <div class="spec-row" v-for="specs in carSpecs" :key="specs.id" v-if="carSpecs.length > 0">

                  <div class="spec-row">
                    <div class="spec-name">马力(horsepower)</div>
                    <div class="spec-value">{{ specs.horsepower }}</div>
                  </div>
                  <div class="spec-row">
                    <div class="spec-name">最高时速(maxSpeed)</div>
                    <div class="spec-value">{{ specs.maxSpeed }}km/h</div>
                  </div>
                  <div class="spec-row">
                    <div class="spec-name">车身尺寸(size)</div>
                    <div class="spec-value">{{ specs.size }}</div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 车辆部件参数组 -->
            <div v-if="carParts.length > 0" class="specs-group">
              <h3>车辆部件参数</h3>
              <div class="specs-table">
                <div class="spec-row" v-for="part in carParts" :key="part.carPartId">
                  <div class="spec-name">{{ part.partName }}</div>
                  <div class="spec-value">{{ part.description }}</div>
                </div>
              </div>
            </div>
            <div v-else class="no-data-message">暂无车辆部件数据</div>

            <!-- 原有参数组 -->
            <div class="specs-group" v-for="specGroup in currentCar.specGroups" :key="specGroup.id" v-if="currentCar.specGroups">
              <h3>{{ specGroup.name }}</h3>
              <div class="specs-table">
                <div class="spec-row" v-for="spec in specGroup.specs" :key="spec.id">
                  <div class="spec-name">{{ spec.name }}</div>
                  <div class="spec-value">{{ spec.value }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 评论选项卡内容 -->
        <div class="tab-content" :class="{ active: activeTab === 'community' }" id="community">
          <!-- 评论列表区域 -->
          <div class="comments-section">
            <h3>用户评论 ({{ comments.length }})</h3>
            <div class="comment-item" v-for="comment in comments" :key="comment.commentId" v-if="comments.length > 0">
              <div class="comment-header">
                <span class="comment-user">用户{{ comment.userId }}</span>
                <span class="comment-date">{{ comment.createTime ? new Date(comment.createTime).toLocaleDateString() : '未知时间' }}</span>
                <div class="comment-ratings">
                  <div class="rating-item">动力: {{ comment.powerScore }}</div>
                  <div class="rating-item">外观: {{ comment.appearanceScore }}</div>
                  <div class="rating-item">舒适: {{ comment.comfortScore }}</div>
                  <div class="rating-item">空间: {{ comment.spaceScore }}</div>
                  <div class="rating-item">操控: {{ comment.handlingScore }}</div>
                  <div class="rating-item">内饰: {{ comment.interiorScore }}</div>
                </div>
              </div>
              <div class="comment-content">{{ comment.commentDetail }}</div>
            </div>
            <div v-else class="no-data-message">暂无用户评论</div>
          </div>
        </div>
      </div>

      <!-- 右侧边栏 -->
      <div class="sidebar">
        <!-- <div class="spec-summary">
          <h3>参数总结</h3>
          <div class="summary-item">
            <span class="summary-label">厂商</span>
            <span class="summary-value">{{ currentCar.manufacturer }}</span>
          </div>
          <div class="summary-item">
            <span class="summary-label">级别</span>
            <span class="summary-value">{{ currentCar.class }}</span>
          </div>
          <div class="summary-item">
            <span class="summary-label">能源类型</span>
            <span class="summary-value">{{ currentCar.energyType }}</span>
          </div>
          <div class="summary-item">
            <span class="summary-label">变速箱</span>
            <span class="summary-value">{{ currentCar.transmission }}</span>
          </div>
          <div class="summary-item">
            <span class="summary-label">发动机</span>
            <span class="summary-value">{{ currentCar.engine }}</span>
          </div>
          <div class="summary-item">
            <span class="summary-label">最大功率(kW)</span>
            <span class="summary-value">{{ currentCar.maxPower }}</span>
          </div>
          <div class="summary-item">
            <span class="summary-label">最大扭矩(N·m)</span>
            <span class="summary-value">{{ currentCar.maxTorque }}</span>
          </div>
          <div class="summary-item">
            <span class="summary-label">车身结构</span>
            <span class="summary-value">{{ currentCar.bodyStructure }}</span>
          </div>
        </div> -->

        <div class="dealer-info">
          <h3>本地经销商</h3>
          <div class="dealer-item">
            <div class="dealer-name">Car4S 旗舰店</div>
            <div class="dealer-price">{{ currentCar.dealerPrice }}</div>
            <div class="dealer-address">距离您 3.2km | 佛山市南海区桂城街道</div>
            <button class="dealer-contact" @click="$router.push({ name: 'dealerContact', query: { carModel: currentCar.name } })" v-if="currentCar.name">联系经销商</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import api from '@/api/index.js';

const route = useRoute();
const modelId = ref(null); // 添加响应式的modelId变量
const currentCar = ref({});
const carSpecs = ref([]);
const carParts = ref([]);
const comments = ref([]);
const averageScore = ref(0);
const loading = ref(true);
const error = ref('');
const activeTab = ref('specs');
const showComments = ref(false);

// 获取车辆详情数据
const fetchCarDetails = async (modelId) => {
  try {
    console.log('22222...',modelId);
    loading.value = true;
    // 使用searchCarsByDTO方法并传入modelId进行查询
    const response = await api.searchCarsByDTO({ modelId });
    console.log('获取到的车辆详情数据1111:', response.data);

    if (response.data && response.data.flag) {
      // 假设返回的是数组，取第一个元素作为当前车辆
      currentCar.value = response.data.result.length > 0 ? response.data.result[0] : {};
      if (Object.keys(currentCar.value).length === 0) {
        error.value = '未找到该车型数据';
      }
    } else {
      error.value = '获取车辆数据失败';
      console.error('获取车辆数据失败:', response.data?.reason || '未知错误');
    }
  } catch (err) {
    error.value = '网络错误，无法获取车辆数据';
    console.error('获取车辆数据异常:', err);
  } finally {
    loading.value = false;
  }
};

// 获取车辆部件数据
// 获取车辆部件数据
const fetchCarSpecs = async (modelId) => {
  try {
    const response = await api.getCarSpecs(modelId);
    if (response.data && response.data.flag) {
      carSpecs.value = response.data.result;
      console.log('获取到的车辆部件数据:', response);
    } else {
      console.warn('获取车辆部件数据失败:', response.data?.reason || '未知错误');
    }
  } catch (err) {
    console.error('获取车辆部件数据异常:', err);
  }
};

// 获取车辆部件数据
const fetchCarParts = async (modelId) => {
  try {
    const response = await api.getCarParts( modelId );
    if (response.data && response.data.flag) {
      carParts.value = response.data.result;
      console.log('获取到的车辆配件数据:', response);
    } else {
      console.warn('获取车辆配件数据失败:', response.data?.reason || '未知错误');
    }
  } catch (err) {
    console.error('获取车辆配件数据异常:', err);
  }
};

// 获取车型评论数据
const fetchModelComments = async (modelId) => {
  try {
    const response = await api.getModelComments(modelId);
    console.log('获取到的车型评论数据:', response.data);
    if (response.data && response.data.flag) {
      comments.value = response.data.result.comments || [];
      averageScore.value = response.data.result.averageScore || 0;
    } else {
      console.warn('获取车型评论数据失败:', response.data?.reason || '未知错误');
    }
  } catch (err) {
    console.error('获取车型评论数据异常:', err);
  }
};

onMounted(() => {
  console.log('路由参数:', route.params);
  modelId.value = Number(route.params.modelId); // 给响应式变量赋值
  console.log('模型ID:', modelId.value);
  if (modelId.value) {
    fetchCarDetails(modelId.value);
    fetchCarSpecs(modelId.value);
    fetchCarParts(modelId.value);
    fetchModelComments(modelId.value);
  } else {
    error.value = '无效的车型ID';
    loading.value = false;
  }
});

const goToReviewPage = () => {
  showComments.value = !showComments.value;
};

// 重试加载数据
const retryLoad = () => {
  const modelId = Number(route.params.modelId);
  if (modelId) {
    error.value = '';
    fetchCarDetails(modelId);
    fetchCarSpecs(modelId);
    fetchModelComments(modelId); // 重试获取评论数据
  }
};
</script>

<style scoped>
/* 基础样式 */
.config-container {
  font-family: Arial, sans-serif;
  color: #e0e0e0;
  background-color: #121212;
  min-height: 100vh;
  position: relative;
}

/* 加载状态样式 */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.loading-spinner {
  width: 50px;
  height: 50px;
  border: 5px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: #ffffff;
  animation: spin 1s ease-in-out infinite;
  margin-bottom: 16px;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.loading-text {
  color: #ffffff;
  font-size: 18px;
}

/* 错误提示样式 */
.error-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 40px;
  text-align: center;
}

.error-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.error-message {
  font-size: 18px;
  margin-bottom: 24px;
  color: #ff6b6b;
}

.retry-btn {
  padding: 10px 20px;
  background-color: #4a6fa5;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.retry-btn:hover {
  background-color: #3a5a8a;
}

/* 无数据提示样式 */
.no-data-message {
  padding: 20px;
  text-align: center;
  color: #888;
  font-style: italic;
  background-color: #1e1e1e;
  border-radius: 4px;
  margin: 10px 0;
}

/* 导航栏样式 */
.navbar {
  background-color: #1a1a1a;
  color: #ffffff;

  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  background-color: #0a0a0a;
}

.search-bar {
  display: flex;
  border: 1px solid #666;
  border-radius: 6px;
  overflow: hidden;
  width: 500px;
}

.search-bar input {
  border: none;
  padding: 0.5rem;
  flex: 1;
  background-color: #333333;
  color: #ffffff;
  font-size: 0.9rem;
}

.search-bar button {
  border: none;
  background-color: #282828;
  color: white;
  padding: 0.5rem 1.5rem;
  cursor: pointer;
  transition: background-color 0.3s;
  font-size: 0.9rem;
  white-space: nowrap;
}

/* 导航栏样式 */


.search-bar {
  display: flex;
  border: 1px solid #666;
  border-radius: 6px;
  overflow: hidden;
  width: 500px;
}

.search-bar input {
  border: none;
  padding: 0.5rem;
  flex: 1;
  background-color: #f5f5f5;
  font-size: 0.9rem;
}

.search-bar button {
  border: none;
  background-color: #282828;
  color: white;
  padding: 0.5rem 1.5rem;
  cursor: pointer;
  transition: background-color 0.3s;
  font-size: 0.9rem;
  white-space: nowrap;
}


/* 车型标题区域 */
.car-title-section {
  padding: 2rem 5%;
  background-color: #1e1e1e;
  text-align: center;
  border-bottom: 1px solid #333;
}

.price {
  margin: 1rem 0;
}

.current-price {
  font-size: 1.8rem;
  color: #e60000;
  font-weight: bold;
  margin-right: 1rem;
}

.original-price {
  color: #999;
  text-decoration: line-through;
}

.actions {
  margin-top: 1.5rem;
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.finance-btn {
  padding: 0.8rem 2rem;
  background-color: transparent;
  color: #4da6ff;
  border: 1px solid #4da6ff;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
}

/* 选项卡样式 */
.tabs {
  display: flex;
  background-color: #1e1e1e;
  border-bottom: 1px solid #333;
  overflow-x: auto;
  padding: 0 5%;
}

.tab {
  padding: 1rem 1.5rem;
  cursor: pointer;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  color: #ccc;
}

.tab.active {
  border-bottom-color: #0066cc;
  color: #0066cc;
  font-weight: bold;
}

/* 内容容器 */
.content-container {
  display: flex;
  padding: 2rem 5%;
  gap: 2rem;
  flex: 1;
}

.main-content {
  flex: 3;
  background-color: #1e1e1e;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
}

.tab-content.active {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.comments-section {
  padding: 20px;
  background-color: #2d2d2d;
  border-radius: 8px;
  margin: 0;
  flex: 1;
}

.comment-item {
  margin-bottom: 20px;
  padding: 15px;
  background-color: #3d3d3d;
  border-radius: 8px;
}

.comment-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.comment-user {
  font-weight: bold;
  color: #0066cc;
}

.comment-date {
  color: #888;
  font-size: 0.9rem;
}

.comment-ratings {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
  gap: 10px;
}

.rating-item {
  font-size: 0.85rem;
  color: #ccc;
}

.comment-content {
  line-height: 1.6;
  color: #e0e0e0;
}

.sidebar {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* 车辆概览样式 */
.car-gallery {
  padding: 2rem;
  border-bottom: 1px solid #eee;
}

.main-image {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.thumbnails {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
}

.thumbnail {
  width: 80px;
  height: 60px;
  object-fit: cover;
  border-radius: 4px;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.3s;
}

.thumbnail:hover {
  opacity: 1;
}

.car-details {
  padding: 2rem;
}

.highlights {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.highlight-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.highlight-icon {
  font-size: 1.2rem;
}

.config-options {
  margin-top: 1.5rem;
}

.config-group {
  margin-bottom: 2rem;
}

.config-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}

.config-item {
  padding: 1rem;
  border: 1px solid #444;
  border-radius: 4px;
  text-align: center;
  background-color: #2d2d2d;
}

.item-value {
  color: #0066cc;
  font-weight: bold;
  margin-top: 0.5rem;
  display: block;
}

/* 参数配置样式 */
.specs-container {
  padding: 2rem;
}

.specs-group {
  margin-bottom: 2rem;
}

.specs-table {
  width: 100%;
  border-collapse: collapse;
}

.spec-row {
  display: flex;
  border-bottom: 1px solid #333;
}

.spec-name {
  flex: 1;
  padding: 0.8rem;
  background-color: #2d2d2d;
}

.spec-value {
  flex: 2;
  padding: 0.8rem;
  color: #e0e0e0;
}

/* 侧边栏样式 */
.spec-summary {
  background-color: #1e1e1e;
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.summary-item {
  display: flex;
  padding: 0.8rem 0;
  border-bottom: 1px solid #333;
}

.summary-item:last-child {
  border-bottom: none;
}

.summary-label {
  flex: 1;
  color: #ccc;
}

.summary-value {
  flex: 2;
  font-weight: bold;
}

.dealer-info {
  background-color: #1e1e1e;
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.dealer-item {
  margin-top: 1rem;
}

.dealer-price {
  color: #e60000;
  font-weight: bold;
  margin: 0.5rem 0;
}

.dealer-address {
  color: #ccc;
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.dealer-contact {
  width: 100%;
  padding: 0.8rem;
  background-color: #0066cc;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* 选项卡内容样式 */
.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

/* 响应式样式 */
@media (max-width: 768px) {
  .content-container {
    flex-direction: column;
  }

  .navbar {
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
  }

  .nav-links {
    flex-wrap: wrap;
    justify-content: center;
  }
}


.car-header {
  display: flex;
  gap: 2rem;
  margin: 1rem auto;
  max-width: 1400px;
  padding: 0 2rem;
  width: 100%;
}

/* 左侧评分卡片样式 */
.rating-card-with-radar {
  width: 280px;
  background: #1e1e1e;
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  flex-shrink: 0;
}

.radar-chart-container {
  margin: 1rem 0;
}

.radar-chart {
  position: relative;
  width: 160px;
  height: 160px;
  margin: 0 auto;
}

.radar-values {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.radar-bg {
  width: 100%;
  height: 100%;
  background: url('') no-repeat center;
  background-size: contain;
}

.radar-values::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('') no-repeat center;
  background-size: contain;
}

.rating-score {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.8rem;
  font-weight: bold;
  color: #ffcc00;
}

.radar-label {
  position: absolute;
  text-align: center;
  font-size: 0.5rem;
  width: 35px;
}

.radar-label span {
  display: block;
  color: #ffcc00;
  font-weight: bold;
  margin-top: 4px;
}

.radar-label.top {
  left: 50%;
  top: 1%;
  transform: translateX(-50%);
}

.radar-label.bottom {
  left: 50%;
  bottom: 1%;
  transform: translateX(-50%);
}

.radar-label.top-right {
  right: 1%;
  top: 18%;
  transform: translateY(-50%);
  text-align: left;
}

.radar-label.bottom-right {
  right: 1%;
  bottom: 18%;
  transform: translateY(0);
  text-align: left;
}

.radar-label.top-left {
  left: 1%;
  top: 18%;
  transform: translateY(-50%);
  text-align: right;
}

.radar-label.bottom-left {
  left: 1%;
  bottom: 18%;
  transform: translateY(0);
  text-align: right;
}

.rating-categories {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  text-align: center;
  margin-top: 0.5rem;
}

.category {
  width: 33%;
  margin-bottom: 0.3rem;
  font-size: 0.8rem;
}

.rating-compare {
  font-size: 0.8rem;
  color: #666;
  text-align: center;
  margin-top: 1rem;
}

/* 用户评价摘要样式 */
.user-review-summary {
  margin-top: 1.2rem;
  padding: 0.8rem;
  background-color: #2d2d2d;
  border-radius: 6px;
  font-size: 0.8rem;
}

.review-label {
  font-weight: bold;
  margin-bottom: 0.5rem;
  color: #e0e0e0;
}

.review-content {
  font-style: italic;
  color: #ccc;
}

.review-author {
  margin-top: 0.5rem;
  font-size: 0.7rem;
  color: #aaa;
  text-align: right;
}

.review-btn {
  width: 100%;
  padding: 0.6rem;
  background-color: #1a73e8;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
  margin-top: 1rem;
}

/* 右侧主内容样式 */
.car-main-content {
  flex: 1;
}

.car-image-container {
  width: 100%;
  height: 400px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.car-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 保持图片比例并完整显示 */
}

.car-info-container {
  display: flex;
  justify-content: center;
  margin-top: 1.5rem;
  padding-left: 0;
}

.car-details {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex: 1;
}

.title-container {
  text-align: left;
}

.title-actions {
  display: flex;
  flex-direction: row;
  gap: 1.5rem;
  align-items: center;
}

.key-specs {
  gap: 0.8rem;
  flex-wrap: nowrap;
}

.price {
  margin-top: 0.5rem;
}

.rating-label {
  font-size: 0.8rem;
  color: #ccc;
  margin-bottom: 0.3rem;
}

.rating-value {
  font-size: 1.5rem;
  font-weight: bold;
  color: #ffcc00;
  margin-bottom: 0.2rem;
}

.rating-compare {
  font-size: 0.7rem;
  color: #bbb;
}

.car-title {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  color: #ffffff;
}

.car-badge {
  display: inline-block;
  background-color: #cc0000;
  color: white;
  padding: 0.2rem 0.6rem;
  border-radius: 4px;
  font-size: 0.8rem;
  margin-bottom: 0.5rem;
}

.key-specs {
  display: flex;
  gap: 1rem;
  margin: 1rem 0;
  flex-wrap: wrap;
}

.spec-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.8rem;
  background-color: #2d2d2d;
  color: #e0e0e0;
  border-radius: 4px;
  font-size: 0.9rem;
}

.spec-icon {
  font-size: 1.1rem;
}

.price {
  color: #ff4d4f;
  font-size: 1.4rem;
  font-weight: bold;
  margin-bottom: 1.2rem;
}

.car-actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.consult-btn,
.finance-btn {
  padding: 0.6rem 1.2rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
}

.consult-btn {
  background-color: #1a73e8;
  color: white;
  border: none;
}

.finance-btn {
  background-color: transparent;
  color: #4da6ff;
  border: 1px solid #4da6ff;
}

.image-placeholder {
  color: #ccc;
  font-size: 0.9rem;
  text-align: center;
  padding: 1rem;
}

.comment-item {
  padding: 15px 0;
  border-bottom: 1px solid #333;
}

.comment-item:last-child {
  border-bottom: none;
}

.comment-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 0.9rem;
}

.comment-user {
  font-weight: bold;
}

.comment-date {
  color: #aaa;
}

.comment-rating {
  color: #ffc107;
}

.comment-content {
  line-height: 1.6;
}
</style>
